<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=2,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>意帝商城手机端</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/zepto.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/touch.js"></script>
<script type="text/javascript" src="js/TouchSlide.1.1.js"></script>
<script src="js/index.js" type="text/javascript"></script>

</head>
<body class="pa">
    <div class="main pr">
        <!-- 主体部分 -->
        <div class="content">
            <div class="main1 bg" style="padding-bottom: 3em;">
                <!-- 头部开始 -->
                <div class="header">
                    <!-- 返回 -->
                    <div class="back">
                        <a href="javascript:history.back(-1)" class="iconfont">&#xe606;</a>
                    </div>

                    <!-- 内页标题 -->
                    <div class="htit">
                        <i>商品详情</i>
                    </div>

                    <!-- 顶部分类 -->
                    <div class="hcate">
                        <a href="#" class="iconfont">&#xe604;</a>
                    </div>
                </div>

                <!-- 头部结束 -->
                <div class="details">
                    <div id="focus" class="focus">
                        <div class="hd">
                            <ul></ul>
                        </div>
                        <div class="bd">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img _src="images/pic_06.jpg" src="images/blank.png" />
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img _src="images/pic_06.jpg" src="images/blank.png" />
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img _src="images/pic_06.jpg" src="images/blank.png" />
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <script type="text/javascript">
                        TouchSlide({
                            slideCell:"#focus",
                            titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
                            mainCell:".bd ul",
                            effect:"leftLoop",
                            autoPlay:true,//自动播放
                            autoPage:true, //自动分页
                            switchLoad:"_src" //切换加载，真实图片路径为"_src"
                        });
                    </script>
                    <!-- 商品标题 -->
                    <div class="details_t">
                        老藤慕斯卡特甜白葡萄酒
                    </div>
                    <!-- 商品价格 -->
                    <div class="details_pri">
                        ￥3800 元
                    </div>
                    <!-- 商品规格：颜色 -->
                    <div class="spec clearfix">
                        <span>颜&nbsp;&nbsp;色</span>
                        <div class="spec_wrap">
                            <span class="spec_box">白色</span>
                            <span class="spec_box">黑色</span>
                            <span class="spec_box">灰色</span>
                            <span class="spec_box">红色</span>
                            <span class="spec_box">白色</span>
                            <span class="spec_box">黑色</span>
                        </div>
                    </div>
                    <!-- 商品规格：尺码 -->
                    <div class="spec clearfix">
                        <span>尺&nbsp;&nbsp;码</span>
                        <div class="spec_wrap">
                            <span class="spec_box">均码</span>
                            <span class="spec_box">M</span>
                            <span class="spec_box">L</span>
                            <span class="spec_box">X</span>
                            <span class="spec_box">XL</span>
                            <span class="spec_box">XXL</span>
                        </div>
                    </div>
                    <script type="text/javascript" src="js/jquery.Spinner.js"></script>
                    <div class="details_num clearfix">
                        <span>数&nbsp;&nbsp;量</span>
                        <div class="details_wrap" id="buynub">
                            <i class="sub">-</i>
                            <input type="text" class="buy_num" value="1">
                            <i class="add">+</i>
                        </div>
                        <!-- 这里放库存数量 -->
                        <input type="hidden" id="stock" value="10">
                    </div>
                    <script type="text/javascript">$("#buynub").Spinner();</script>

                    <!-- 详情和评论的切换 -->
                    <div class="pdetail">
                        <div class="hd clearfix">
                            <ul>
                                <li class="on">商品详情</li>
                                <li>买家评论</li>
                            </ul>
                        </div>
                        <div class="bd">
                            <!-- 商品详情 -->
                            <div>
                                <table class="pdetail_table">
                                    <colgroup width="25%"></colgroup>
                                    <colgroup width="75%"></colgroup>
                                    <tr>
                                        <td>产品类型</td>
                                        <td>法国荣克堡科比埃尔2010 干红葡萄酒</td>
                                    </tr>
                                    <tr>
                                        <td>产　区</td>
                                        <td>米内瓦(Minervois)</td>
                                    </tr>
                                    <tr>
                                        <td>色　泽</td>
                                        <td>亮丽的紫红色</td>
                                    </tr>
                                    <tr>
                                        <td>酒　庄</td>
                                        <td>泰曼里斯酒庄</td>
                                    </tr>
                                    <tr>
                                        <td>葡萄品种</td>
                                        <td>歌海娜、西拉、慕合怀特</td>
                                    </tr>
                                    <tr>
                                        <td>原产国</td>
                                        <td>意大利</td>
                                    </tr>
                                    <tr>
                                        <td>容  量</td>
                                        <td>750ml</td>
                                    </tr>
                                    <tr>
                                        <td>口  感</td>
                                        <td>单宁具有颗粒感</td>
                                    </tr>
                                    <tr>
                                        <td>酒精度</td>
                                        <td>14°</td>
                                    </tr>
                                    <tr>
                                        <td>等  级</td>
                                        <td>10-20℃恒温，相对湿度60-73%，避光、防震。</td>
                                    </tr>
                                </table>

                                <!-- 图片和文字介绍 -->
                                <div class="mc">
                                    <img src="images/pic_06.jpg" alt="" title="" align="" />
                                    <img src="images/pic_06.jpg" alt="" title="" align="" />
                                    <img src="images/pic_06.jpg" alt="" title="" align="" />
                                    <img src="images/pic_06.jpg" alt="" title="" align="" />
                                </div>
                            </div>

                            <!-- 买家评论 -->
                            <div>
                                <!-- 评论为空时 -->
                                <!-- <div class="com_empty">该商品暂无评论</div> -->
                                <ul class="commlist">
                                    <li>
                                        <div class="userInfo clearfix">
                                            <p class="userName">waku98899963</p>
                                        </div>
                                        <blockquote>非常满意，下次还来买</blockquote>
                                        <div class="time">2015-01-29&nbsp;&nbsp;08:23:57</div>

                                        <div class="commadd">
                                            <blockquote>
                                                客服回复：感谢支持!
                                            </blockquote>
                                            <div class="time">2015-01-29&nbsp;&nbsp;08:23:57</div>
                                        </div>
                                    </li>

                                    <li>
                                        <div class="userInfo clearfix">
                                            <p class="userName">waku98899963</p>
                                        </div>
                                        <blockquote>非常满意，下次还来买</blockquote>
                                        <div class="time">2015-01-29</div>
                                    </li>

                                    <li>
                                        <div class="userInfo clearfix">
                                            <p class="userName">waku98899963</p>
                                        </div>
                                        <blockquote>非常满意，下次还来买</blockquote>
                                        <div class="time">2015-01-29</div>
                                    </li>

                                    <li>
                                        <div class="userInfo clearfix">
                                            <p class="userName">waku98899963</p>
                                        </div>
                                        <blockquote>非常满意，下次还来买</blockquote>
                                        <div class="time">2015-01-29</div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="cart_fix">
                    <a href="#" id="yd-buy">立即购买</a>
                    <a href="#" id="yd-coll">加入收藏</a>
                </div>

                <script type="text/javascript">
                $(function(){
                    $('#yd-buy').on('click', function(){
                        // 加入购物车成功
                        layer.msg('商品已成功加入购物车');


                        // 加入购物车失败
                        //layer.msg('加入购物车失败,请重试');
                    });

                    $('#yd-coll').on('click', function(){
                        // 添加收藏成功
                        layer.msg('关注成功');

                        // 已收藏
                        //layer.msg('此商品已收藏');

                        // 加入收藏失败
                        //layer.msg('加入收藏失败');
                    });
                })
                </script>

                <!-- 底部部分 -->
                <div class="footer">
                    <div class="footer_t">

                        <!-- 未登录 -->
                        <div class="footer_l"><a href="#">登录</a>&nbsp;|&nbsp;<a href="#">注册</a></div>

                        <!-- 已登录 -->
                        <!-- <div class="footer_l"><a href="#">yd-2015415</a>&nbsp;|&nbsp;<a href="#">退出</a></div> -->

                        <div class="footer_r"><a href="#">反馈</a>&nbsp;|&nbsp;<a href="#" class="back_top">回到顶部</a></div>
                    </div>
                    <div class="footer_b">
                        <p>全国免费客服：<i>400-8855-829</i></p>
                        <p>©m.yidi9.com&nbsp;上海意帝酒业有限公司</p>
                    </div>
                </div>
                <!-- 底部结束 -->
            </div>
        </div>
        <!-- 主体部分结束 -->
    </div>
</body>
</html>